export function init(){

    // 分类筛选点击事件
    document.querySelectorAll('.filter-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.filter-item').forEach(i => {
                i.classList.remove('active');
            });
            this.classList.add('active');
            // 这里可以添加筛选逻辑
            console.log('筛选分类:', this.textContent);
        });
    });

// 分页按钮点击事件
    document.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
        btn.addEventListener('click', function() {
            if(this.classList.contains('active')) return;

            document.querySelectorAll('.page-btn').forEach(b => {
                b.classList.remove('active');
            });

            if(!this.querySelector('i')) {
                this.classList.add('active');
            }
            // 这里可以添加分页逻辑
            console.log('切换到页码:', this.textContent);
        });
    });


// AI应用卡片操作按钮
    document.querySelectorAll('.ai-card:not(.add-new) .btn-outline').forEach(btn => {
        btn.addEventListener('click', async function (e) {
            e.stopPropagation();
            const action = this.querySelector('i').className.replace('fas fa-', '');
            const appName = this.closest('.ai-card').querySelector('h3').textContent;
            console.log(`执行操作: ${action} 应用: ${appName}`);
            const index = await import('./index.js')
            // 根据不同的action执行不同的操作
            switch (action) {
                case 'play':
                    //alert(`启动应用: ${appName}`);
                    const chat = "pages/chat.html"
                    window.open(chat, '_blank');
                    break;
                case 'chart-line':
                    //alert(`查看统计: ${appName}`);
                    const statistics = "pages/chat-statistics.html"
                    //window.open(statistics, '_blank');
                    index.loadContent(statistics, 'chat-statistics');
                    break;
                case 'cog':
                    //alert(`配置应用: ${appName}`);
                    const settings = "pages/chat-settings.html"
                    index.loadContent(settings, 'chat-settings');
                    break;
            }
        });
    });

// 显示新建应用模态框
    document.getElementById('createNewAppBtn').addEventListener('click', function() {
        document.getElementById('createAppModal').classList.add('show');
    });
    /*
    document.getElementById('addNewAppCard').addEventListener('click', function() {
        document.getElementById('createAppModal').classList.add('show');
    });*/

// 关闭模态框
    document.getElementById('closeModalBtn').addEventListener('click', function() {
        document.getElementById('createAppModal').classList.remove('show');
    });

    document.getElementById('cancelCreateBtn').addEventListener('click', function() {
        document.getElementById('createAppModal').classList.remove('show');
    });

// 点击模态框外部关闭
    document.getElementById('createAppModal').addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.remove('show');
        }
    });

// 图标选择
    const iconOptions = document.querySelectorAll('.icon-option');
    iconOptions.forEach(option => {
        option.addEventListener('click', function() {
            iconOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

// 颜色选择
    const colorOptions = document.querySelectorAll('.color-option');
    colorOptions.forEach(option => {
        option.addEventListener('click', function() {
            colorOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

// 高级设置切换
    document.getElementById('advancedToggleBtn').addEventListener('click', function() {
        const icon = this.querySelector('i');
        const content = document.getElementById('advancedContent');

        if (content.classList.contains('show')) {
            content.classList.remove('show');
            icon.classList.remove('fa-chevron-up');
            icon.classList.add('fa-chevron-down');
        } else {
            content.classList.add('show');
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-up');
        }
    });

// 表单提交
    document.getElementById('createAppForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // 这里可以添加表单验证和提交逻辑
        const appName = this.querySelector('input[type="text"]').value;

        // 模拟创建成功
        alert(`应用 "${appName}" 创建成功！`);
        this.reset();
        document.getElementById('createAppModal').classList.remove('show');

        // 在实际应用中，这里可以添加AJAX请求将数据发送到服务器
        // 然后更新UI显示新创建的应用
    });

}